<template>
  <div class="home">
    <h1>{{ title }}</h1>
    <div>
      {{ content }}
    </div>
  </div>
</template>

<script>
import NEWS from '@/data'
export default {
  name: 'News',
  data () {
    return {
      title: '',
      content: ''
    }
  },
  watch: {
    $route: {
      handler (val, oldVal) {
        this.getData(val.params.id)
      },
      // 深度观察监听
      deep: true
    }
  },
  created () {
    const _id = this.$route.params.id
    if (_id) {
      this.getData(_id)
    }
  },
  methods: {
    getData (newsId) {
      const _new = NEWS.find(({ id }) => id === newsId)
      console.log(newsId)
      if (_new) {
        this.title = _new.title
        this.content = _new.content
      }
    }
  }
}
</script>
